<template>
  <view id="ds" class="details-head" :style="pubSty">
    <view class="head-show" v-if="openIdFlag">
      <u-alert title="根据您的就诊记录推荐您看以下内容" type="primary"></u-alert>
      <view class="head-data" @tap="jump(14)">
        <view>
          <text class="iconfont icon-jibing"></text>
        </view>
        <view class="head-p" >
          <view class="publicFontStyle">艾滋病</view>
          <view class="p">艾滋病（AIDS）是一种危害性极大的传染病，由感染艾滋病病毒（HIV）引起，HIV是一种能攻击人体免疫系统的病毒。
            它把人体免疫系统中最重要的CD4T淋巴细胞作为主要攻击目标，大量破坏该细胞，使人体丧失免疫功能。因此，人体易于感染各种疾病，并发生恶性肿瘤，病死率较高。
            HIV在人体内的潜伏期平均为8～9年，在艾滋病病毒潜伏期内，可以没有任何症状地生活和工作多年
          </view>
        </view>
        <view class="tip">
          <text class="iconfont icon-jifen"></text>
          流行病
        </view>
      </view>
    </view>
    <view class="medicine">
      <view class="h publicFontStyle">
        常见病科普
      </view>
      <view class="list">
				<view @tap="jump(i.serialId)" v-for="i in objInfo" :key="i.DiseName">
          <text class="iconfont" :class="'icon-'+(i.diseImg)+''"></text>
          {{i.DiseName}}
				</view>
      </view>
    </view>
    <view class="intellectualList">

  <!--      <text class="iconfont icon-zhishiku-yixuezhishi" style="font-size: 44rpx; margin-right: 5rpx;"></text>
        知识 -->
				<view class="h publicFontStyle">
				  知识
				</view>

      <view class="listFaer">
        <view class="listDetali" v-for="(i, index) in obj" @tap="jump(11)" :key="i.id">
          <view class="listSon">
            <image :src="urlP + i.imgPath"></image>
            <view class="">
              <view> 
                <text>{{i.title}}</text>
              </view>
              <view class="utag">
                <view class="utag1" v-if="i.state == 1">养生</view>
                <view class="utag2" v-else-if="i.state == 2">保健</view>
              </view>
              <view class="listP">
                {{i.about}}
              </view>
              <view class="ubutt">
                <u-button type="primary" text="前往" size="mini" color="#846BFF" shape="circle"></u-button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mixins } from '../../common/mixins.js'

export default {
  onShow : function (data) {
    this.openIdFlag = uni.getStorageSync('openid');
  },
  data () {
    return {
      obj: [], //展示列数据
			objInfo: [],
			urlP: '', //接口地址
			list: 0, //目前展示列行
			count: '',
			openIdFlag: ''
    }
  },
	mixins: [mixins],
	onReachBottom () {
		this.getObjList()
	},
  methods: {
    jump: function (index) {
      uni.navigateTo({
        url: `/pages/knowDetailsList/knowDetailsList?index=${index}`
      });
    },
		getObjList: async function () {
			if(this.list <= this.count) {
				uni.showLoading({
					title: '加载中'
				})
				
				let {data: res} = await this.$http.get('/art/articieList', {params: {list: this.list}})
				this.count = res.result2
				this.obj.push(...res.result)
				++this.list
				setTimeout(() => {
					uni.hideLoading();
				}, 500)
			}
		}
  },
	created() {
		this.urlP = this.$url
	},
	async mounted() {
		let {data: res2} = await this.$http.get('/art/articieMomm')
		this.objInfo.push(...res2)
		this.getObjList()
	}
}
</script>

<style lang="scss" scoped>
  .details-head {
    .head-show {
      margin-bottom: 50rpx;
      >view:nth-child(1) {
        background-color: #ffc069;
        color: #fff;
        padding-left: 10rpx;
      }
      .head-data {
        position: relative;
        display: flex;
        margin: auto;
        box-shadow: 0rpx 2rpx 4rpx rgba(222, 197, 197, 0.2),
                    0rpx 3rpx 6rpx rgba(249, 196, 196, 0.2);
        border-radius: 0 0 10rpx 10rpx;
        padding: 10rpx 0;
        padding-top: 40rpx;
        .icon-jibing {
          font-size: 90rpx;
        }
        >view:nth-child(1) {
          display: flex;
          align-items: center;
          justify-content: center;
          padding-left: 10rpx;
          image {
            width: 100rpx;
            height: 100rpx;
          }
        }
        .head-p {
          margin-left: 10rpx;
          padding: 0 5rpx;
          >view:nth-child(1) {
            font-weight: 700;
          }
          .p {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp:3;
            -webkit-box-orient: vertical;
            font-size: 24rpx;
            margin: 10rpx 0;
            text-indent: 25rpx;
            padding: 0 20rpx;
            font-family: "新宋体";
            color: #999999;
          }
          >view:nth-child(3) {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 10rpx;
            font-size: 28rpx;
            image {
              width: 30rpx;
              height: 30rpx;
            }
          }
          .gotorun {
            color: #999;
          }
        }
        .tip {
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: absolute;
          top: 0rpx;
          right: 30rpx;
          width: 140rpx;
          padding: 6rpx 15rpx;
          height: 50rpx;
          border-radius: 0 0 20rpx 20rpx;
          background-color: #F4F7FF;
          font-size: 28rpx;
          color: #6B7A9E;
          image {
            width: 35rpx;
            height: 35rpx;
          }
        }
      }
    }
    .medicine {
      margin: 30rpx 0 60rpx 0;
      .h {
        padding: 6rpx 20rpx;
        font-family: "方正粗黑宋简体";
        background: linear-gradient(to right, #FE7300 10rpx, transparent 10rpx) no-repeat;
        margin-bottom: 25rpx;
      }
      .list {
        display: flex;
        width: 95%;
        margin: auto;
        background-color: #F8F9FE;
        border-radius: 20rpx;
        box-shadow: 0rpx 2rpx 4rpx rgba(221, 187, 187, 0.5),
            0rpx 3rpx 6rpx rgba(209, 165, 165, 0.5);
        view {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-content: space-between;
          padding: 20rpx;
          font-size: 28rpx;
          font-family: "方正粗黑宋简体";
          height: 120rpx;
        }
        .iconfont {
          font-size: 70rpx;
        }
      }
    }
    .intellectualList {
      position: relative;
      // background: linear-gradient(#f1f1f1, #d6e4ff);
      width: 100%;
      padding: 30rpx 20rpx;
      margin-top: 50rpx;
      box-sizing: border-box;
      border-top: 2rpx solid #e1e1e1;
      .h1 {
        font-size: 38rpx;
        font-family: "方正粗黑宋简体";
      }
      .listFaer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .listDetali {
          box-shadow: 0 4rpx 4rpx #f1f1f1;
          .font {
            display: -webkit-box;
            overflow: hidden;
            // white-space: nowrap;
            text-overflow: ellipsis;
            word-wrap: break-word;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
          }
          margin-top: 30rpx;
          width: 47%;
          .listSon {
            position: relative;
            height: 650rpx;
            border-radius: 30rpx;
            overflow: hidden;
            background-color: #fff;
            image {
              width: 100%;
              height: 70%;
            }
            text {
              @extend .font;
              font-size: 30rpx;
              font-family: "方正粗黑宋简体";
              padding-left: 10rpx;
            }
            .utag {
              position: absolute;
              top: 15rpx;
              left: 15rpx;
              width: 73rpx;
              >view {
                width: 90rpx;
                height: 45rpx;
                line-height: 45rpx;
                border-radius: 10rpx;
                text-align: center;
                font-size: 28rpx
              }
							.utag1 {
								background-color: #3C9CFF;
                color: #fff;
							}
							.utag2 {
								background-color: #a0d911;
                color: #fff;								
							}
            }
            .listP {
              @extend .font;
              color: #999;
              padding-left: 10rpx;
              font-size: 26rpx;
              padding-right: 10rpx;
              margin-top: 5rpx;
              opacity: .7;
							height: 70rpx;
            }
            .ubutt {
              width: 96%;
              margin: auto;
              margin-top: 15rpx;
            }
          }
        }
      }
    }
  }
</style>